<template>
  <div class="file-manager-container">
    <!-- 模板中心容器 -->
    <div class="template-container" v-if="showTemplateCenter">
      <template-center :show-dialog="true" @close="showTemplateCenter = false" />
    </div>

    <!-- 功能区 -->
    <div class="operation-area">
      <span class="title">开始</span><br /><br />
      <el-row :gutter="20">
        <el-col :span="6" v-for="(btn, index) in operations" :key="index">
          <el-button :class="['func-btn', `btn-${index}`]" @click="handleOperation(btn.action)">
            <div class="btn-content">
              <i :class="btn.icon"></i>
              <h3>{{ btn.title }}</h3>
              <p>{{ btn.desc }}</p>
            </div>
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 最近文件区 -->
    <div class="recent-files">
      <div class="header">
        <div class="left">
          <span class="title">最近</span><br /><br />
          <!-- @select="handleSelect" @click="handleFileAction(action)"-->
          <el-menu :default-active="defaultActive" class="el-menu-demo" mode="horizontal">
            <el-menu-item  v-for="action in fileActions" :key="action" :index="action"
              @click="handleFileAction(action)" >{{ action }}</el-menu-item>
          </el-menu>
        </div>
        <div class="filters">
          <span v-for="filter in filters" :key="filter" class="filter-item" @click="toggleSort(filter)">
            {{ filter}}
            <i :class="[
              'el-icon-sort',
              {
                'el-icon-sort-up': sortConfig[filter] === 'asc',
                'el-icon-sort-down': sortConfig[filter] === 'desc',
              },
            ]"></i>
          </span>
        </div>
      </div>

      <!-- 文件列表 -->
      <div class="file-list">
        <div v-for="(file, index) in files" :key="index" class="file-item">
          <div class="file-icon">
            <i class="el-icon-document" style="font-size: 32px; color: #409eff"></i>
          </div>
          <div class="file-info">
            <div class="name">{{ file.fileName }}</div>
            <div class="meta">
              <span>{{ file.type }}</span>
              <span>{{ file.department }}</span>
              <span v-if="recordsType == 'p'">{{ file.previewTime }}</span>
              <span v-if="recordsType == 'e'">{{ file.updataTime }}</span>
            </div>
          </div>
          <div class="file-actions">
            <i class="el-icon-star-on" style="color: #e6a23c"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFileBrowser } from "@/api/zhishiku/templates";
import TemplateCenter from "@/views/zhishiku/templates/TemplateCenter";

export default {
  components: {
    TemplateCenter,
  },
  name: "index",
  data() {
    return {
      showTemplateCenter: false, // 默认不显示模版中心
      recordsType: "p", // "p"预览 "e"编辑
      //排序状态
      sortConfig: {
        type: "none",
        department: "none",
        time: "none",
      },
      operations: [
        {
          title: "新建文档",
          desc: "新建文档、演示、表格、PDF",
          icon: "el-icon-document-add",
          action: "createDoc",
        },
        {
          title: "新建文件夹",
          desc: "新建文件夹，将文件收纳归类",
          icon: "el-icon-folder-add",
          action: "createFolder",
        },
        {
          title: "上传",
          desc: "将本地文件或本地文件夹上传",
          icon: "el-icon-upload",
          action: "upload",
        },
        {
          title: "模版中心",
          desc: "专业模板，让每个文档都成为佳作",
          icon: "el-icon-help",
          action: "template",
        },
      ],
      fileActions: ["浏览", "编辑", "收藏"],
      defaultActive: "浏览",
      filters: ["类型", "部门", "时间"],
      files: [],
    };
  },
  mounted() {
    this.openFileBrowser();
  },
  methods: {
    handleOperation(action) {
      console.log("触发操作:", action);
      if (action === "template") {
        console.log("触发模版中心操作");
        this.showTemplateCenter = true;
      }
    },
    toggleSort(field) {
      switch (field) {
        case "类型":
          field = 'type';
          break;
        case "部门":
          field = 'department';
          break;
        case "时间":
          if(this.recordsType = "p"){
            field = 'previewTime';
          }else{
            field = 'updataTime';
          }
          break;
      }
      const states = ["asc", "desc"];
      this.sortConfig[field] = states[(states.indexOf(this.sortConfig[field]) + 1) % 2];
      // 排序
      this.Sortedfiles(field,this.sortConfig[field]);
    },
    Sortedfiles(key,sortOrder){
      let result = [...this.files];
      
      // 开始排序
      sortOrder === "asc" ?
      result.sort((a,b) => a[key].localeCompare(b[key]))
      : result.sort((a,b) => b[key].localeCompare(a[key]))
      this.files = result;
    },
    handleFileAction(action) {
      switch (action) {
        case "浏览":
          this.openFileBrowser();
          break;
        case "编辑":
          this.enableEditMode();
          break;
        case "收藏":
          this.toggleFavorite();
          break;
      }
    },
    async openFileBrowser(){      
      //p 浏览 e编辑
      this.recordsType = "p"
      getFileBrowser("p").then((response) => {
        this.files = response;
      });
    },
    enableEditMode(){
      //p 浏览 e编辑
      this.recordsType = "e"
      getFileBrowser("e").then((response) => {
        this.files = response;
      });
    },
    toggleFavorite(){
      console.log("收藏");
      this.files = [
        {
          name: "新建文档2",
          type: "word文档",
          department: "人事部门",
          time: "2025-03-07 17:22",
        },
        // 重复数据用于演示
        ...Array(2).fill({
          name: "新建文档3",
          type: "word文档",
          department: "人事部门",
          time: "2025-03-08 17:22",
        }),
      ]
    }
  },
};
</script>

<style lang="scss" scoped>
.file-manager-container {
  padding: 20px;
  background: #fff;

  .operation-area {
    margin-bottom: 30px;

    .title {
      font-size: 17px;
      font-weight: 450px;
      margin-right: 20px;
    }

    .func-btn {
      width: 100%;
      height: 120px;
      padding: 15px;
      text-align: left;
      border-radius: 8px;

      .btn-content {
        i {
          font-size: 32px;
          margin-bottom: 10px;
        }

        h3 {
          margin: 5px 0;
          font-size: 16px;
        }

        p {
          margin: 0;
          font-size: 12px;
          color: #666;
        }
      }

      // 按钮颜色
      &.btn-0 {
        background: #7f8bd5;
        color: white;
      }

      &.btn-1 {
        background: #519ff4;
        color: white;
      }

      &.btn-2 {
        background: #1f9fde;
        color: white;
      }

      &.btn-3 {
        background: #18d0ea;
        color: white;
      }
    }
  }

  .recent-files {
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .actions {
        .underline-btn {
          border: none;
          border-radius: 0;
          padding: 12px 20px;
          border-bottom: 2px solid #409eff;

          &:hover {
            background: #f5f7fa;
            border-bottom-color: darken(#409eff, 10%);
          }

          &:active {
            border-bottom-width: 3px;
          }
        }
      }

      .title {
        font-size: 17px;
        font-weight: 450px;
        margin-right: 20px;
      }

      .filter-item {
        cursor: pointer;
        transition: all 0.3s;
        padding: 8px 12px;
        border-radius: 4px;

        .el-icon-sort {
          font-size: 14px;
          color: #909399;
          transition: color 0.3s;
          position: relative;
          right: -4px;
        }

        &:hover {
          background: #f5f7fa;

          .el-icon-sort {
            transform: scale(1.1);
          }
        }

        .el-icon-sort-up {
          color: #67c23a;

          &::before {
            content: "\e790";
            /* Element UI的升序图标代码 */
          }
        }

        .el-icon-sort-down {
          color: #f56c6c;

          &::before {
            content: "\e78f";
            /* Element UI的降序图标代码 */
          }
        }
      }
    }

    .file-list {
      border: 1px solid #ebeef5;
      border-radius: 4px;

      .file-item {
        display: flex;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #ebeef5;
        transition: background 0.3s;

        &:hover {
          background: #f5f7fa;
        }

        .file-icon {
          margin-right: 15px;

          .doc-icon {
            font-size: 32px;
            color: #409eff;
          }
        }

        .file-info {
          flex: 1;

          .name {
            font-size: 14px;
            margin-bottom: 5px;
          }

          .meta {
            font-size: 12px;
            color: #909399;

            span {
              margin-right: 15px;
            }
          }
        }

        .file-actions {
          color: #e6a23c;
          cursor: pointer;
        }
      }
    }
  }
}

.template-container {
  position: fixed;
  margin-left: 90px;
  top: 0;
  left: 90px;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  z-index: 1000;
  overflow-y: auto;
  padding: 20px;
}
</style>
